import React, { MouseEventHandler } from 'react'
import { history } from 'umi';
import Box from '@material-ui/core/Box'
import Typography from '@material-ui/core/Typography'
import makeStyles from '@material-ui/core/styles/makeStyles'
import { Avatar, Chip, Button } from '@material-ui/core'
import clsx from 'clsx'
import { useStore } from 'reto';
import User from '@/store/user';

const useStyles = makeStyles({
  root: {
    width: '100%',
    height: '100%',
    padding: '16px',
    boxSizing: 'border-box',
  },
  avatar: {
    cursor: 'pointer',
  },
  avatarName: {
    cursor: 'pointer',
  },
  sign: {

  },
  center: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
        
    '& $avatar': {
      height: 72,
      width: 72,
      marginBottom: 10
    },
    '& $avatarName': {
      fontSize: 20,
    },
    '& $sign': {
  
    },
  },

  bottom: {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr',
    gridTemplateRows: '1fr auto auto',
    placeItems: 'center start',

    '& $avatar': {
      height: 64,
      width: 64,
      marginRight: 10,
      gridRowStart: 2,
      gridRowEnd: 4,
    },
    '& $avatarName': {
      fontSize: 20,
      gridRow: 2,
      gridColumn: 2,
      marginBottom: 0,
    },
    '& $sign': {
      gridRow: 3,
      gridColumn: 2,
    },
  }
})

interface IProps{
  position: 'center' | 'bottom'
}

const HeaderCardInfo: React.FC<IProps> = ({
  position = 'bottom'
}) => {
  const classes = useStyles()
  const userData = useStore(User).user
  
  const handleUesrClick = () => {
    history.push('/me');
  }

  const handleClick = (url: string) => {
    window.open(url, '_blank')
  };

  return <Box
    className={clsx(
      classes.root,
      classes[position],
    )}
  >
    <Avatar 
      alt="avatar" 
      src={userData?.face} 
      className={classes.avatar} 
      onClick={handleUesrClick}
    />
  
    <Typography 
      className={classes.avatarName} 
      variant="h5" 
      component="h2" 
      gutterBottom
      onClick={handleUesrClick}
    >
      {userData?.name}
    </Typography>

    <Typography 
      className={classes.sign} 
      variant="body2" 
      color="textSecondary" 
      component="p"
    >
      {userData?.sign}
    </Typography>
    {
      position === 'center' && (
        <Box 
          display='flex'
          flexDirection='row'
          marginTop={1}>
            {
              userData ? userData?.link.map((item, index) => (
                <Button
                  style={{
                    margin: index !== 0 && index !== userData.link.length - 1
                      ? '0 10px' : '0'
                  }}
                  variant="outlined" 
                  onClick={handleClick.bind(null, item.url)}
                  key={item.name}
                >
                  {item.name}
                </Button>
              )) : null
            }
        </Box>
      )
    }
  </Box>
}

export default HeaderCardInfo